import React, {useEffect, useState} from 'react';
import {numberHandle} from '~/utils/number';
import CardTable from '~/page/FineBi/common/CardTable';
import CommonCard from '~/page/FineBi/common/CommonCard';
import Loading from '~/page/FineBi/common/Loading';
import CommonEchart from '~/page/FineBi/common/CommonEchart';
import {queryValues, queryDetail, download} from '~/service/refundReport';
import {COMMON_KEY} from '../config';

const tooltipCallback = params => {
    let html = '';
    if (Array.isArray(params)) {
        html = params.map(entry => {
            const {marker, seriesName, value} = entry;
            return `${marker}${seriesName} ${numberHandle(value, 2)}`;
        });
    }

    return html.join('<br >');
};

const labelFormatter = (params = {}) => {
    const {
        data: {value = ''}
    } = params;
    return numberHandle(value, 2);
};

const extendOptions = chart => ({
    tooltip: {
        axisPointer: true
        // formatter: tooltipCallback
    },
    xAxis: {
        common: {
            type: 'value',
            boundaryGap: [0, 0.01],
            axisLine: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
        }
    },
    yAxis: {
        common: {
            type: 'category',
            data: chart?.xAxis?.[0]?.data,
        }
    },
    color: ['#528FF2'],
    grid: {
        left: '3%',
        right: '3%',
        bottom: 20,
        containLabel: true
    },
    series: {
        common: {
            barMaxWidth: 30,
            barGap: '100%',
            barCategoryGap: '50%',
            label: {
                show: true,
                position: 'insideLeft',
                formatter: labelFormatter
            },
        }
    },
    legend: {
        show: false
    },
});

function BarItem(props) {
    const {queryCentralValues, dimensionAndValues, dId, partKey} = props;
    const [loading, setLoading] = useState(false);
    const [title, setTitle] = useState();
    const [dataSource, setDataSource] = useState([]);

    useEffect(() => {
        const dashBoard = [
            {
                dashBoardName: dId,
                dashBoardId: dId
            }
        ];

        const pDimensionAndValues = dimensionAndValues.map(item => ({
            ...item,
            dimensionId: `${dId}_${COMMON_KEY}`,
            dimensionName: COMMON_KEY
        }));
        const param = {
            dimensionAndValues: pDimensionAndValues,
            dashBoardList: dashBoard
        };
        setLoading(true);
        (queryCentralValues || queryValues)(param)
            .then(res => {
                const cardDetail = res?.data?.[dId] || {};
                const dataRes = cardDetail[partKey];
                const {unitName, unitId} = dataRes || {};

                setTitle(unitName);
                setDataSource(dataRes || {});
            })
            .finally(() => {
                setLoading(false);
            });
    }, [dimensionAndValues]);

    return (
        <CommonCard
            title={title}
            style={{height: '100%'}}
            span={6}
            loading={loading}
            content={(
                <CommonEchart
                    {...props}
                    id={partKey}
                    extendEchartsOptions={extendOptions(dataSource?.chart)}
                    dataSource={dataSource}
                />
            )}
        />
    );
}

export default BarItem;

